<template>
	<div>
		<!-- <el-dialog :before-close="handleClose" title="收银台" :visible.sync="visible" width="40%"> -->
		<div class="w-40% m-[0_auto] pt-15px">
			<div>
				<div class="text-20px font-bold">余额支付</div>
				<div class="mt-10px">
					<span font-bold>支付金额：</span>
					<span class="text-#F80D0D">￥{{ record.payPrice }}</span>
					<span class="ml-5px font-bold">元</span>
				</div>
				<div class="p-20px bg-#EFEFEF rd-10px mt-10px">
					<div class="font-bold">支付方式</div>
					<div class="w-100% mt-15px flex items-center justify-between">
						<div class="flex items-center">
							<div>
								<img style="width: 30px; height: 30px" src="@/assets/images/切图 12@2x.png" />
							</div>
							<div class="ml-10px font-bold">微信</div>
						</div>
						<div>
							<img style="width: 20px; height: 20px" src="@/assets/images/check.png" />
						</div>
					</div>
				</div>
				<div class="w-40% bg-#567722 text-#fff m-[30px_auto] p-10px rd-10px text-center cursor-pointer" @click="pay">
					立即支付￥{{ record.payPrice }}
				</div>
			</div>
		</div>
		<!-- </el-dialog> -->
		<!-- 充值二维码弹窗  -->
		<el-dialog :close-on-click-modal="false" width="35%" :visible="qrcodeVisible" append-to-body title="充值二维码"
			destroy-on-close :beforeClose="closePay">
			<div class="center flex-col" v-if="!payStatus">
				<div v-loading="qrCodeLoading" ref="qrcode" class="qrcode-config"></div>
				<div class="w-[150px] text-center mt-5">打开微信扫一扫支付</div>
			</div>
			<div v-else>
				<div class="center mx-auto">
					<i class="el-icon-circle-check text-[#1AAD19] text-[38px]"></i>
				</div>
				<div class="text-center mt-5 text-[#409EFF]">支付成功</div>
			</div>
			<span slot="footer" class="dialog-footer" v-if="!payStatus">
				<el-button @click="closePay">取消支付</el-button>
				<el-button type="primary" @click="queryPayStatus">支付完成</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import { addAecharge, getRechargeResult } from "@/api/business";
import QRCode from "qrcodejs2";
export default {
	data() {
		return {
			visible: false,
			record: {
				payPrice: 0,
				changeAmount: 0,
			},
			qrcodeVisible: false,
			qrCodeLoading: false,
			// 微信支付订单状态,是否支付成功
			payStatus: false,
			timer: null, // 定时器
			// 微信支付订单号
			orderId: "",
		}
	},
	created() {
		console.log(this.$route.query);
		this.record.payPrice = this.$route.query.payPrice;
		this.record.changeAmount = this.$route.query.changeAmount;
	},
	methods: {
		// init(record) {
		// 	console.log(record);
		// 	this.record = record.data;
		// 	this.visible = true;
		// },
		pay() {
			this.qrcodeVisible = true;
			this.qrCodeLoading = true;
			addAecharge({
				price: this.record.payPrice,
				payType: '01',
			}).then((res) => {
				try {
					this.orderId = res.data.id;
					this.setQrCodeUrl(res.data.code_url);
				} catch (e) {
					this.$modal.msgError("二维码生成失败");
					this.qrcodeVisible = false;
				}
			});
		},
		setQrCodeUrl(text) {
			this.$nextTick(() => {
				let qrCode = new QRCode(this.$refs.qrcode, {
					text,
					width: 150,
					height: 150,
					colorDark: "#000000",
					colorLight: "#ffffff",
					correctLevel: QRCode.CorrectLevel.H,
				});
				// 移除title
				qrCode._el.title = "";
			});
			this.qrCodeLoading = false;
			setTimeout(() => {
				this.pollingOrderStatus();
			}, 2000);
		},
		// 轮询订单状态
		pollingOrderStatus() {
			// 最大轮询次数
			let maxPollingTimes = 10;
			this.timer = setInterval(() => {
				getRechargeResult(this.orderId)
					.then((res) => {
						// status 支付状态 1待支付 2 支付成功 3 支付失败
						if (res.data.status === 2) {
							clearInterval(this.timer);
							this.payStatus = true;
							this.handlePaySuccess();
						} else if (res.data.status === 3) {
							clearInterval(this.timer);
							this.$modal.msgError("支付失败");
						}
					})
					.finally(() => {
						maxPollingTimes--;
						if (maxPollingTimes <= 0) {
							clearInterval(this.timer);
						}
					});
			}, 5000);
		},
		queryPayStatus() {
			// 查询当前微信支付订单支付状态
			getRechargeResult(this.orderId).then((res) => {
				// status 支付状态 1待支付 2 支付成功 3 支付失败
				switch (res.data.status) {
					case 1:
						this.$modal.msgError("待支付");
						break;
					case 2:
						this.payStatus = true;
						this.handlePaySuccess();
						break;
					case 3:
						this.$modal.msgError("支付失败");
						break;
					default:
						window.parent.postMessage({ type: 'payClose', data: "" }, 'https://www.jietupai.cn');
						break;
				}
			});
		},
		// 支付成功，自动关闭
		handlePaySuccess() {
			setTimeout(() => {
				this.closePay();
				// this.handleClose();
			}, 5000);
		},
		closePay() {
			if (this.timer) {
				clearInterval(this.timer);
			}
			this.qrcodeVisible = false;
			this.payStatus = false;
			// this.$emit("ok");
			window.parent.postMessage({ type: 'payClose', data: "" }, 'https://www.jietupai.cn');
		},
		// handleClose() {
		// 	this.visible = false;
		// },
	},
}

</script>
<style scoped lang="scss"></style>